<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="popmotion.global.min.js"></script>
    <style>
        body {
            background-color: rgb(171, 207, 107);
        }

        .box {
            width: 50%;
            margin: 0 auto;
            /* background-color: red; */
            height: 200px;
            position: absolute;
            bottom: 5%;
            left: 0;
            right: 0;
        }

        .item {
            float: left;
            width: 25%;
            height: auto;
            padding: 20px;
            box-sizing: border-box;
        }
        .item img{
            width: 70%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="ball" style="  width: 100px;    height: 100px;    border-radius: 50%;    background: red;"></div>


    <div class="box">
        <div class="item">
            <img src="./image/foot_waste.png" alt="">
        </div>
        <div class="item">
            <img src="./image/recycle.png" alt="">
        </div>
        <div class="item">
            <img src="./image/other.png" alt="">
        </div>
        <div class="item">
            <img src="./image/harmful.png" alt="">
        </div>
    </div>
    <script>
        const { styler, spring, listen, pointer, value } = window.popmotion;
        const divball = document.querySelector(".ball");
        const ball = styler(divball);
        const ballXY = value({ x: 500, y: 500 }, ball.set);

        listen(divball, "mousedown touchstart").start((e) => {
            e.preventDefault();
            pointer(ballXY.get()).start(ballXY);
        })
        listen(document, 'mouseup touchend').start(() => { ballXY.stop(); });
    </script>
</body>

</html>